import React from "../../vite-runner/core/React";
function Todos() {
    // 生成唯一标识：随机id
    let [todoList,setTodoList] = React.useState([
        // {
        //     title:'喝水',
        //     id:crypto.randomUUID(),
        //     status:'active'
        // },
        // {
        //     title:'上班',
        //     id:crypto.randomUUID(),
        //     status:'done'
        // },
        // {
        //     title:'吃饭',
        //     id:crypto.randomUUID(),
        //     status:'active'
        // }
    ])
    let [displayTodos,setDisplayTodos] = React.useState([])
    let [filter,setFilter] = React.useState("all")
    let [iptValue,setIptValue] = React.useState("")
    function addClick() {
        if(!iptValue) return
        addTodo(iptValue)
        setIptValue("")
    }
    function createTodo(title) {
        return {title,id:crypto.randomUUID(),status:'active'}
    }
    function addTodo(title) {
        setTodoList((todoList) => [...todoList,createTodo(title)])
    }
    function removeTodo(id) {
        const newTodos = todoList.filter((todo) =>{
            return todo.id !== id
        })
        setTodoList(newTodos)
    }
    function doneTodo(id) {
        const newTodos = todoList.map((todo) => {
            if(todo.id === id) {
                return {...todo, status :'done'}
            }
            return todo
        })
        setTodoList(newTodos)
    }
    function cancelTodo(id) {
        const newTodos = todoList.map((todo) => {
            if(todo.id === id) {
                return {...todo, status :'active'}
            }
            return todo
        })
        setTodoList(newTodos)
    }

    function saveTodo() {
        localStorage.setItem('todos', JSON.stringify(todoList))
    }

    // 组件初始化之后
    React.useEffect(()=>{
        const rawTodos = JSON.parse(localStorage.getItem("todos"))
        console.log(rawTodos);
        if(rawTodos) {
            setTodoList(rawTodos)
        }
    },[])
    React.useEffect(()=>{
        if(filter === 'all') {
            setDisplayTodos(todoList)
        } else if(filter === 'active') {
            const newTodos = todoList.filter((todo) => {
                return todo.status === 'active'
            })
            setDisplayTodos(newTodos)
        } else if(filter === 'done') {
            const newTodos = todoList.filter((todo) => {
                return todo.status === 'done'
            })
            setDisplayTodos(newTodos)
        }
    },[filter,todoList])
    
    return (
        <div>
            <h1>TODOS</h1>
            <div>
                <input type="text" value={iptValue} onChange={(e)=>setIptValue(e.target.value)} /><button onClick={addClick}>add</button>
            </div>
            <div>
                <button onClick={saveTodo}>save</button>
            </div>
            <div>
                <input type="radio" id="all" name="filter" value="all" checked={filter === 'all'} onChange={() => setFilter("all")} />
                <label for="all">all</label>
                <input type="radio" id="done" name="filter" value="done" checked={filter === 'done'} onChange={() => setFilter("done")}/>
                <label for="done">done</label>
                <input type="radio" id="active" name="filter" value="active" checked={filter === 'active'} onChange={() => setFilter("active")}/>
                <label for="active">active</label>
            </div>
            <ul>
                {
                    ...displayTodos.map((todo) => {
                       return (
                            <li>
                                <TodoItem todo={todo} removeTodo={removeTodo} doneTodo={doneTodo} cancelTodo={cancelTodo} />
                            </li>
                       )
                    })
                }
                
            </ul>
        </div>
    )
}
function TodoItem({ todo,removeTodo,doneTodo,cancelTodo }) {
    return (
        <div className={todo.status}>
            {todo.title}&nbsp;
            <button onClick={() => removeTodo(todo.id)}>remove</button>
            {
                todo.status === "active" ?
                <button onClick={() => doneTodo(todo.id)}>done</button>
                :
                <button onClick={() => cancelTodo(todo.id)}>cancel</button>
            }
        </div>
    )
}
export default Todos